<template>
    <div class="nav_container">
        <div class="nav_box page_contant_box">
            <div class="nav_logo" @click="goToPage('/')">
                <img src="../../assets/logo.png" alt="">
            </div>
            <div class="nav_menu">
                <n-menu v-model:value="tabsModelValue" mode="horizontal" :options="menuList" responsive
                    :on-update:value="onTabsChange" />
            </div>
            <div v-if="false">
                <n-space>
                    <IconBtn v-for="(item, index) in menuBtns" :key="index" :image="item.image" :text="item.text"
                        @onClick="onMenuIconClick(item)"></IconBtn>
                </n-space>
            </div>
        </div>
    </div>

    <breadcrumbVue :tabsModelValue="tabsModelValue" v-if="tabsBreadcrumb">
    </breadcrumbVue>
</template>

<script setup>
import { ref, watch } from "vue"
import { useRouter, useRoute } from "vue-router"
import { NMenu, NSpace } from "naive-ui"
import { useMenuList } from "./data.js"
import IconBtn from "../iconBtn/index.vue"
import breadcrumbVue from "./breadcrumb.vue"

const { menuList, menuBtns } = useMenuList()
const router = useRouter()
const route = useRoute()

const tabsModelValue = ref(menuList[0].key)
const tabsBreadcrumb = ref(menuList[0].breadcrumb)

const goToPage = (path) => {
    router.push(path)
}

const onTabsChange = (value) => {
    goToPage(value)

    window.scroll({
        top: 0, left: 0
    });
}

const onMenuIconClick = (item) => {
    console.log(item);
}

watch(route, (newRoute) => {
    const foundItem = menuList.find(item => item.label === newRoute.name)

    if (foundItem) {
        tabsModelValue.value = foundItem.key
        tabsBreadcrumb.value = foundItem.breadcrumb
    }
}, { immediate: true })
</script>

<style lang='less'>
@import '@/styles/mixin.less';

.nav_container {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: white;
    padding: 20px 0;

    .nav_box {
        .responsive-width(1200px);
        position: sticky;
        top: 0;
        z-index: 999;
        height: 60px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;

        .nav_logo {
            display: flex;
            align-items: center;

            &:hover {
                cursor: pointer;
            }

            img {
                height: 40px;
            }
        }

        .nav_menu {
            margin-left: 20px;

            .n-menu {
                .v-overflow {
                    .n-menu-item {
                        font-size: 18px;
                    }
                }
            }

            .n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header {
                color: white;
                background-color: var(--n-item-text-color-active-horizontal);
                padding: 4px 10px;
            }

            .n-menu-item-content .n-menu-item-content-header {
                font-size: 14px;
            }
        }
    }
}
</style>